<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-04-06 15:25:18
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-05-09 10:41:03
 * @FilePath: \code\cwp-front\pc-collaboration\src\handles\handle-list\summary\modules\return\components\chooseFlow.vue
 * @Description: 选择处理后流程怎么走
-->
<script>
    export default {
        name: 'ChooseAttitude',
        props: {
            //选中值
            value: {
                type: String,
            },
            //名字
            name: {
                type: String,
            },
            //选项列表
            options: {
                type: Array,
            },
        },
        data() {
            return {
                selected: this.value,
            };
        },
        render() {
            return (
                <ul id="choose-flow">
                    <li>
                        {this.$i18n('workflow.special.stepback.label4')}
                        {this.name}
                    </li>
                    <li>
                        {this.name}
                        {this.$i18n('workflow.special.stepback.label3')}
                    </li>
                    <li>
                        <a-radio-group
                            defaultValue={this.value}
                            onChange={({ target: { value } }) => (
                                (this.selected = value), this.$emit('input', value)
                            )}
                        >
                            {this.options.map((item) => (
                                <div class="radio-item">
                                    <a-radio disabled={item.isDisabled} value={item.value}>
                                        {item.name}
                                        <span v-show={this.selected === item.value}>
                                            <i class="ico16 h_risk_16"></i>
                                            <span class="tip">{item.tip}</span>
                                        </span>
                                    </a-radio>
                                </div>
                            ))}
                        </a-radio-group>
                    </li>
                    <li class="tip">{this.$i18n('collaboration.workflow.trace.hadToRunBack')}</li>
                </ul>
            );
        },
    };
</script>
<style lang="scss" scoped>
    #choose-flow {
        > li {
            margin-bottom: 10px;
        }

        .radio-item {
            display: flex;
            margin-bottom: 5px;
            align-items: center;

            .h_risk_16 {
                position: relative;
                top: -2px;
                margin-right: 5px;
                margin-left: 10px;
            }

            .tip {
                color: $danger;
            }
        }
    }
</style>
